<template>
    <div>
        <div class="content-box">
            <div class="search-container">
                <div class="form-content">
                    <el-form :inline="true" ref="filterFormRef" :model="filter" class="demo-form-inline">
                        <el-form-item label="登录名" prop="loginName">
                            <el-input v-model.trim="filter.loginName" maxlength="30" placeholder="请输入登录名" clearable/>
                        </el-form-item>
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model.trim="filter.mobile" maxlength="11" placeholder="请输入手机号" clearable/>
                        </el-form-item>
                        <!-- <el-form-item label="用户ID" prop="id">
                            <el-input v-model="filter.id" maxlength="200" placeholder="请输入用户ID" clearable/>
                        </el-form-item> -->
                        <el-form-item label="状态" prop="yn">
                            <el-select v-model="filter.yn" placeholder="全部" clearable>
                                <el-option label="全部" value="" />
                                <el-option label="启用" :value="true" />
                                <el-option label="禁用" :value="false" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="search-btns">
                    <el-button type="primary" @click="getFilterParams">查询</el-button>
                    <el-button @click="resetForm(filterFormRef)">重置</el-button>
                    
                </div>
            </div>
            <div class="operate-btn">
                <el-button v-if="btnAuthMap['midrange:center:user:create']" type="primary" :icon="Plus" @click="addAcount()">新增</el-button>
            </div>
            <div>
                <!-- 列表 -->
                <table-wrap hideHeader title="用户列表" :total="total"
                        v-model:loading="loading" v-model:pageSize="requestData.pageSize"
                        v-model:pageIndex="requestData.pageIndex" :tableData="tableData" @request-list="getList">
                        <el-table-column label="序号" align="center" fixed="left" min-width="60" show-overflow-tooltip>
                            <template #default="scope">
                                <div>{{(requestData.pageIndex - 1 )*requestData.pageSize+scope.$index+1}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="userId" min-width="140" label="用户ID" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="loginName" min-width="140" label="登录名" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="userName" min-width="140" label="用户名" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="mobile" min-width="140" label="手机号" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="createTime" min-width="140" label="创建时间" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="yn" min-width="100" label="状态" show-overflow-tooltip>
                            <template #default="scope">
                                <el-switch
                                    v-model="scope.row.yn"
                                    width="50px"
                                    class="ml-2"
                                    inline-prompt
                                    active-text="启用"
                                    inactive-text="禁用"
                                    @change="enableAccount(scope.row)"
                                    :disabled="!btnAuthMap['midrange:center:user:status']"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="160" fixed="right" align="center" v-if="getOpBtnLen(['midrange:center:user:edit', 'midrange:center:user:asign'])">
                            <template #default="scope">
                                <el-button type="primary" v-if="btnAuthMap['midrange:center:user:edit']" link @click="addAcount(scope.row)">编辑</el-button>
                                <el-button type="primary" v-if="btnAuthMap['midrange:center:user:asign']" link @click="assignRoles(scope.row)">分配角色</el-button>
                            </template>
                        </el-table-column>
                </table-wrap>
            </div>
        </div>
        <AddAccount v-if="accountDialogParams.show" :accountDialogParams="accountDialogParams" :account="currentUser" @dialog:close="closeAcountDialog" @dialog:confirm="confirmAcountDialog"></AddAccount>
        <AssignRoles v-if="rolesDialogParams.show" type="1" :dialogParams="rolesDialogParams" :account="currentUser" @dialog:close="closeRolesDialog" @dialog:confirm="confirmRolesDialog"></AssignRoles>
    </div>
</template>
<script>
    import { reactive, ref, onMounted } from 'vue'
    import { useStore } from 'vuex'
    import TableWrap from '@/components/table-wrap/table-wrap.vue'
    import AddAccount from './dialog/add-account.vue'
    import AssignRoles from './dialog/assign-roles.vue'
    import {
        Plus, Search
    } from '@element-plus/icons-vue'
    import dayjs from 'dayjs';
    import Dialog from '@/lib/fn.js'
    import { useBtnAuth } from '@/hooks/useBtnAuth.js'

    export default {
        name: 'wand-user-list',
        components: { TableWrap, AddAccount, AssignRoles },
        setup() {
            const store = useStore()
            const filterFormRef = ref()
            const filter = reactive({
                loginName: null,
                mobile: null,
                id: null,
                yn: null
            });
            const { btnAuthMap, getOpBtnLen } = useBtnAuth()
            const keyword = ref('')
            const multipleTable = ref()
            const tableData = ref([]);
            const total = ref(0);
            const loading = ref(false);
            const requestData = ref({
                pageIndex: 1,
                pageSize: 10
            });
            const multipleSelection = ref([])
            // 新增账号页面
            const accountDialogParams = ref({
                show: false,
                title: '新增账号',
                width: '900px',
                showButton: true
            })
            const currentUser = ref()
            const getRowKeys = (row) => {
                return row.id;
            }
            const getFilterParams = () => {
                requestData.value.pageIndex = 1
                getList()
            }
            const resetForm = (formEl) => {
                console.log('reset', formEl)
                if (!formEl) return
                formEl.resetFields()
                getList()
            }
            // 列表
            const getList = () => {
                loading.value = true;
                // multipleTable.value && multipleTable.value.clearSelection();
                console.log('filter', filter)
                for(let key in filter) {
                    if(filter[key] === '') {
                        filter[key] = null
                    }
                }
                G_transmit('wandUserList', {
                    data: {
                        ...filter,
                        ...requestData.value,
                        clientId: 'sanren-wand-pc'
                    }
                }).then((res) => {
                    if(res && res.data) {
                        tableData.value = res.data.rows || []
                        total.value = res.data.total
                    }
                }).finally(() => {
                    loading.value = false;
                })
            }
            // 添加账号对话框
            const addAcount = (item) => {
                accountDialogParams.value.show = true;
                if (item) {
                    accountDialogParams.value.title = '编辑账号'
                    currentUser.value = item
                } else {
                    currentUser.value = null
                }
            }
            // 启用用户
            const enableUser = (userId, yn) => {
                G_transmit('wandEnableUser', {
                    data: {
                        userId, yn
                    }
                }).then((res) => {
                    store.dispatch('message', {
                        message: yn ? '已启用':'已禁用',
                        type: 'success'
                    })
                }, (error) => {
                    console.log('error', error)
                })
            }
            const enableAccount = (item) => {
                Dialog.Confirm(function(){
                    enableUser(item.userId, item.yn)
                }, item.yn?'启用后，该用户可以正常访问平台，是否确认启用？':'禁用后，该用户将无法进入平台，是否确认禁用？', item.yn?'确定启用':'确定禁用', function(){
                    item.yn = !item.yn
                })()
            }
            // 关闭添加账号对话框
            const closeAcountDialog = () => {
                accountDialogParams.value.show = false;
                currentUser.value = null
            }
            // 账号对话框confirm
            const confirmAcountDialog = () => {
                accountDialogParams.value.show = false;
                currentUser.value = null
                getList()
            }
            // 分配角色对话框参数
            const rolesDialogParams = ref({
                show: false,
                title: '分配角色',
                width: '900px',
                showButton: true
            })
            // 分配角色对话框
            const assignRoles = (item) => {
                rolesDialogParams.value.show = true;
                currentUser.value = item
            }
            // 关闭添加账号对话框
            const closeRolesDialog = () => {
                rolesDialogParams.value.show = false;
                currentUser.value = null
            }
            // 账号对话框confirm
            const confirmRolesDialog = () => {
                rolesDialogParams.value.show = false;
                getList()
            }
            onMounted(() => {
                getList()
            })

            return {
                filterFormRef,
                filter,
                btnAuthMap,
                getOpBtnLen,
                keyword,
                tableData,
                total,
                requestData,
                loading,
                multipleSelection,
                currentUser,
                Search,
                Plus,
                dayjs,
                getRowKeys,
                getList,
                addAcount,
                enableAccount,
                getFilterParams,
                resetForm,
                accountDialogParams,
                closeAcountDialog,
                confirmAcountDialog,
                rolesDialogParams,
                assignRoles,
                closeRolesDialog,
                confirmRolesDialog
            };
        }
    };
</script>
<style scoped lang="scss">
.content-box {
    min-height: calc(100vh - 200px);
    padding: 20px;
}
.w200 {
    width: 200px;
}
.mr0 {
    margin-right: 0;
}
.search-input {
    width: 270px;
}
.filter-box {
    display: flex;
    .el-form {
        flex: 1
    }
}
</style>